<template>
     <div class="layout-padding">
        <div class="layout-padding-auto layout-padding-view">
            <section class="overflow-y-auto h-full px-3 py-4">
                <div class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-4 mb-4">
                    <div class="bg-[#eceef0] py-3 pt-4 transition-all duration-300 px-2 hover:border-blue-400 border
                        border-transparent cursor-pointer rounded-xl group">
                        <div class="font-bold text-xs mb-1.5 px-6 text-gray-500">
                        {{ t('aigcApp.createApp') }}
                        </div>
                        <div class="w-full transition-all hover:bg-white rounded-lg py-1.5 px-6 flex items-center gap-1 font-medium
                            hover:text-blue-500" @click="handleAdd">
                            <SvgIcon :name="'line-md:file-plus'" :iconify="true"/>
                            <span class="text-sm">{{ t('aigcApp.createEmptyApp') }}</span>
                        </div>
                    </div>
        
                    <div v-for="item in list" :key="item.id" :class="[activeDropdownId === item.id]?'!border-blue-400':''"
                        class="bg-white px-4 py-3 pt-4 transition-all hover:border hover:border-blue-400 border border-transparent duration-300
                            transform cursor-pointer rounded-xl group"
                            @click="onInfo(item)"
                        >
                        <div class="flex flex-col sm:-mx-4 sm:flex-row">
                            <div class="sm:mx-4">
                                <div class="relative bg-orange-100 p-4 rounded-lg" style="background-color: rgb(255 237 213)">
                                    <SvgIcon class="text-8xl" :name="'prime:microchip-ai'" :iconify="true"/>
                                    <div class="absolute bottom-[-6px] p-1 right-[-5px] shadow bg-white mx-auto rounded-lg" style="background: white;">
                                        <SvgIcon class="text-3xl text-orange-500" :name="'lucide:bot'" :iconify="true" style="color: rgb(249 115 22)"/>
                                    </div>
                                </div>
                            </div>
                            <div class="pr-4">
                                <h1 class="text-lg font-semibold text-gray-700 capitalize">{{item.name}}</h1>
                                <p class="mt-2 text-gray-500 capitalize text-xs">
                                    {{ item.remark }}
                                </p>
                            </div>
                        </div>
        
                        <div class="flex mt-4 -mx-2 px-2 text-gray-400 justify-between items-center">
                            <div class="flex items-center gap-1">
                                <SvgIcon :name="'mdi:tag-outline'" :iconify="true"/>
                                <span v-if="item.model!=null" class="text-xs">{{ item.model.model }}</span>
                            </div>    
                            <div class="flex items-center" @click.stop>
                                <el-dropdown :teleported="false"
                                    placement="bottom-end"
                                    trigger="click"
                                    size="small"
                                    @command="(key:String) => onSelectAction(key, item)"
                                    @visible-change="(show:boolean) => handleDropdownShow(show, item.id)">
                                    <div :class="[activeDropdownId === item.id ? 'bg-gray-200' : 'hover:bg-gray-200']"
                                        class="rounded p-1 transition-all cursor-pointer"
                                    >
                                    <el-icon :size="20"><MoreFilled /></el-icon>
                                    </div>
                                    <template #dropdown>
                                        <el-dropdown-menu class="min-w-[160px]">
                                            <el-dropdown-item
                                            v-for="option in getOptions(item)"
                                            :key="option.key"
                                            :command="option.key"
                                            :divided="option.divided||false"
                                            >
                                            {{ option?.label||"" }}
                                            </el-dropdown-item>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!--修改-->
            <aigc-app-dialog ref="appDialogRef" @refresh="fetchData()" />
        </div>
    </div>
</template>

<script setup lang="ts" name="aigcApp">
import { useI18n } from "vue-i18n";
import { delObj, getList } from "/@/api/aigc/app";
import { useMessage, useMessageBox } from '/@/hooks/message';
import { useRoutesList } from '/@/stores/routesList';
    //引入组件
    const AigcAppDialog = defineAsyncComponent(() => import('./form.vue'));
    const {t} = useI18n();
    const appDialogRef = ref();
    const list=ref([]);
    const router = useRouter();
    const routesList=useRoutesList();
    onMounted(()=>{
        fetchData();
    });
    async function fetchData(){
      await getList().then(res=>{
            if(res.success){
                list.value=res.data;
            }
        });
    }
    //新增
    const handleAdd = () => {
        appDialogRef.value.openDialog();
    };
    //修改
    const handleUpdate = (row:any) => {
        appDialogRef.value.openDialog(row.id);
    };
    //删除
    const handleDelete = async (ids: string[]) => {
        try {
    		await useMessageBox().confirm(t('common.delConfirmText'));
    	} catch {
    		return;
    	}
        // 删除数据
        try{
            await delObj(ids);
            fetchData();
            useMessage().success(t("common.delSuccessText"));
        } catch (err) {
            console.error(err);
        }
    };

    //判断执行命令
    function onSelectAction(key:String,item:any){
        if(key==='edit'){
            handleUpdate(item);
            return;
        }
        if(key==='delete'){
            handleDelete([item.id]);
            return;
        }
    }
    //跳转页面
    async function onInfo(item:any) {
      router.push({
				path: '/app/info',
				query: {
					id: item.id
				},
			}).then(()=>{
                routesList.updateTab({
                    path: '/aigc/app/index',
                    query:{
                        updated:true
                    }
                });
            });
    }
    //下拉选项
    const getOptions=(item:any)=>{
        return [
            {key:'edit',label:t('aigcApp.editApp')},
            {key:'divided',divided:true},
            {key:'delete',label:t('common.delBtn')}
        ];
    }
  
    //下拉选中ID
    const activeDropdownId=ref(null);
    //
    const handleDropdownShow=(show:boolean,itemId:any)=>{
        activeDropdownId.value=show?itemId:null;
    }

</script>